<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select filterable @change="queryList()" v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-select @change="queryList" v-model="queryParams.format" class="zs-select-md zs-space-right-sm" placeholder="业态" clearable>
					<el-option v-for="item in dictObj.brandFirstBizTypes" :key="item.format" :label="item.format" :value="item.format" />
				</el-select>
				<el-select @change="queryList" v-model="queryParams.bizMode" class="zs-select-md zs-space-right-sm" placeholder="资产类型" clearable>
					<el-option v-for="item in bizModeList" :key="item.bizMode" :label="item.bizMode" :value="item.bizMode" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.startMonth || queryParams.endMonth || queryParams.contractsStatus }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-date-picker class="zs-space-right-sm" v-model="queryParams.startMonth" type="month" value-format="YYYY-MM" placeholder="权责开始月" clearable :disabled-date="disabledDateStart" @change="queryList" :teleported="false" />
						<el-date-picker class="zs-space-right-sm" v-model="queryParams.endMonth" type="month" value-format="YYYY-MM" placeholder="权责结束月" clearable :disabled-date="disabledDateEnd" @change="queryList" :teleported="false" />
						<el-select v-model="queryParams.contractsStatus" class="zs-select-md zs-space-right-sm" placeholder="合同状态" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in dictObj.contractsStatusList" :key="item.contractsStatus" :label="item.contractsStatus" :value="item.contractsStatus" />
						</el-select>
					</template>
				</el-popover>
				<el-button @click="queryList()" class="zs-btn-plain">查询</el-button>
			</span>
			<span>
				<el-button class="zs-btn-plain" @click="handleDownload">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content zs-table-first-row-special">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns" :isHavePage="false" :isHaveIndex="false"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import { toThousands } from '@/utils/number-util';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { getBizModeDropdownApi, getDropDownListApi } from '@/api/SpecialReport/receivable';
	import { getArrearsStatisticsListProjectListApi, getArrearsProjectExportApi } from '@/api/SpecialReport/netReceipts';
	import detailApi from '@/api/Manage/Business/detailPages';
	import { reactive, ref } from 'vue';
	import { useRouter } from 'vue-router';
	let router = useRouter();
	// 查询条件
	let queryParams = reactive({
		projectCode: '',
		format: '',
		bizMode: '',
		startMonth: '',
		endMonth: '',
		contractsStatus: '',
	});

	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		cloumns: [
			{
				prop: 'index',
				label: '序号',
				width: '80',
				type: 'customMethods',
				methods: (a, empty, { $index }) => ($index == 0 ? '合计' : $index),
			},
			{
				prop: 'projectName',
				label: '项目名称',
				align: 'left',
				type: 'html',
				render: ({ row }) => {
					return (
						<span class="zs-link" onClick={() => goBillPage(row)}>
							{row.projectName}
						</span>
					);
				},
			},
			{ prop: 'format', label: '业态', align: 'center', width: '100', type: 'customMethods', methods: row => (row.format ? row.format : '') },
			{ prop: 'projectStage', label: '阶段', align: 'center', width: '100', type: 'customMethods', methods: row => (row.projectStage ? row.projectStage : '') },
			{ prop: 'groupName', label: '集团', align: 'center', width: '100', type: 'customMethods', methods: row => (row.groupName ? row.groupName : '') },
			{ prop: 'city', label: '城市', align: 'center', width: '100', type: 'customMethods', methods: row => (row.city ? row.city : '') },
			{ prop: 'invRecAmtL', label: '应收金额', align: 'right', type: 'customMethods', methods: (row, empty) => (row.invRecAmtL ? toThousands(row.invRecAmtL) : empty) },
			{ prop: 'invIncomeAmtL', label: '实收金额', align: 'right', type: 'customMethods', methods: (row, empty) => (row.invIncomeAmtL ? toThousands(row.invIncomeAmtL) : empty) },
			{ prop: 'debtAmt', label: '欠款金额', align: 'right', type: 'customMethods', methods: (row, empty) => (row.debtAmt ? toThousands(row.debtAmt) : empty) },
			{ prop: 'collectionRate', label: '收缴率', align: 'right' },
		],
	});

	//列表数据源
	function queryList() {
		tableData.loading = true;
		getArrearsStatisticsListProjectListApi(queryParams).then(res => {
			let resData = res.data;
			if (resData.code == 200 && resData.data && resData.data.projectList && resData.data.projectList != null && resData.data.projectList.length > 0) {
				let sumObj = {
					debtAmt: resData.data.debtAmtLTotal,
					invIncomeAmtL: resData.data.invIncomeAmtLTotal,
					invRecAmtL: resData.data.invRecAmtLTotal,
					collectionRate: resData.data.collectionRateLTotal,
				};
				resData.data.projectList.unshift(sumObj);
				tableData.data = resData.data.projectList;
			} else {
				tableData.data = [];
			}
			tableData.loading = false;
		});
	}

	// 业态，费项，合同状态
	const dictObj = reactive({});
	async function getBrandfirstBizType() {
		let res = await getDropDownListApi();
		if (res.data.code != 200) return;
		dictObj.brandFirstBizTypes = res.data.data.formatDropdownList;
		dictObj.contractsStatusList = res.data.data.contractsStatusDropdownList;
		dictObj.categoryArrearsDropDownList = res.data.data.categoryArrearsDropDownList;
	}

	// 查询项目下拉选
	const projectList = ref([]);
	const getPorjectList = async() => {
		let res = await detailApi.queryProjectApi({ type: 1 })
		if (res.data.code != 200) return
		projectList.value = res.data.data || [];
	};

	// 资产类型
	const bizModeList = ref([]);
	const getAssetTypeList = async () => {
		let res = await getBizModeDropdownApi();
		if (res.data.errorCode != 200) return;
		bizModeList.value = res.data.data;
	};

	//导出
	const handleDownload = async () => {
		const fileName = `欠款统计表.xls`;
		let fileData = await getArrearsProjectExportApi(queryParams);
		downloadNewFile(fileData.data, fileName);
	};

	//时间判断
	const disabledDateStart = date => {
		if (!queryParams.endMonth) return false;
		return date.getTime() > new Date(queryParams.endMonth).getTime();
	};

	const disabledDateEnd = date => {
		if (!queryParams.startMonth) return false;
		return date.getTime() < new Date(queryParams.startMonth).getTime();
	};

	//跳转账单
	function goBillPage(row) {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Manage/Business/debtInformation/contractArrears',
				rTitle: '欠款追缴合同报表',
				projectCode: row.projectCode,
			},
		});
	}

	getPorjectList();
	getAssetTypeList();
	getBrandfirstBizType();
	queryList();
</script>

<style lang="scss" scoped>
	:deep(.el-table__row .zs-link) {
		cursor: pointer !important;
	}
</style>
